<template>
  <div class="page">
    <div class="head">
      <h1>采集</h1>
      <div class="auto" @click="showAuto()">自动</div>
    </div>
    <div class="panel scroll-msg" v-if="listData.length > 0">
      <help class="help">
        <div>
          <p>每日喂食满5颗蟠桃小猴可进入准备就绪页面，必须为空闲状态才可以消耗{{hairNum}}猴毛出行采集，采集时间为1-999分钟依照hash值随机，小猴采集完毕打开包裹后可再次准备就绪，当天投食可多次进行采集。</p>
        </div>
      </help>
      <div class="title">大家都在玩</div>
      <vue-seamless :data="listData" :class-option="option" class="seamless-warp">
        <ul class="item">
          <li v-for="(item,index) in listData" :key="index">
            <span>{{ item.nickName }}的小猴<router-link :to="`/monkey/${item.monkeyId}`"># {{ item.monkeyId }}</router-link>，采集{{ item.travelTime | toHourMinute }}归来，带回了</span>
            <span v-if="item.prizePeach">蟠桃*{{ item.prizePeach }}、</span>
            <span v-if="item.prizeToken">石头*{{ item.prizeToken }}、</span>
            <span v-if="item.feePeach">神仙草*{{ item.feePeach }}、</span>
            <span v-if="item.prizeSpecial == 1">复活书*1</span>
            <span v-if="item.prizeSpecial == 2">复活石*1</span>
          </li>
        </ul>
      </vue-seamless>
    </div>
    <div class="panel">
      <div>采集花费{{hairNum}}猴毛，当前采集系数：神仙草{{award[2]}}，石头{{award[1]}}，蟠桃{{award[0]}}，AA获得复活书，AAAA获得复活石</div>
      <help class="help">
        <div>
          <p>采集收益，根据旅行的hash，最后三个数字，从后到前分别对应蟠桃、石头、神仙草，数量分别为倒数第一位数字/2、倒数第二位数字/2、倒数第三位数字/3后取整，如hash尾号为3a67，则获得蟠桃3个，石头3个，神仙草1个。hash后两位为AA获得复活书，后四位AAAA获得复活石，系数我们会根据系统情况作出灵活变动且公告。</p>
        </div>
      </help>
    </div>
    <div class="filter">
      <ul class="status">
        <li v-for="(item, index) in category" :class="{'active': item.value === status}" @click="changeCategory(item.value)" :key="index">{{$t(item.name)}}</li>
      </ul>
      <div class="btns" v-show="status === ''">
        <div class="option" @click="showFilter = true"></div>
      </div>
    </div>
    <div class="ready" v-show="status === ''">
      <box gap="12px 8px" v-if="records.length > 0">
        <x-button type="warn" @click.native="tripAllConfirm()">全部出发</x-button>
      </box>
      <div class="panel" v-for="(item,index) in records" :key="index">
        <div class="monkey" @click="tripConfirm(item.id,item.monkeyId)">
          <img :src="item.facade" :style="{background: item.background}">
          <div class="info">
            <p># {{ item.monkeyId }} · {{ item.generation }} 代</p>
            <p style="font-size: 12px">成长：{{ item.grow }}/生育：{{ item.bear }}/力量：{{ item.makeMoney }}/体重：{{ item.weight }}</p>
          </div>
        </div>
      </div>
      <infinite-loading @infinite="getReadyPage" ref="infiniteLoading">
        <span slot="no-more"></span>
        <div slot="no-results">
          <br>
          <empty></empty>
        </div>
        <spinner slot="spinner" type="lines"></spinner>
      </infinite-loading>
    </div>
    <div class="others" v-if="status !== '' && bol">
      <box gap="20px" v-if="others.length > 0">
        <x-button type="warn" @click.native="openAll()" v-if="status == 1">全部打开</x-button>
      </box>
      <div class="panel" v-for="(item,index) in others" :key="index">
        <div class="monkey" @click="clickEvent(status,item.id,item.endTime)">
          <img :src="item.facade" :style="{background: item.background}">
          <div class="info">
            <p># {{ item.monkeyId }} · {{ item.generation }} 代</p>
            <div v-show="status == 0">
              采集中，
              <count-down :startTime="new Date().getTime()" :endTime="item.endTime" endText="0 秒"></count-down>后返回
            </div>
            <p v-if="status == 1" class="gift-icon"><span>已返回，请拆包裹</span></p>
            <p v-if="status == 2">{{ item.endTime | formatTime }} 返回</p>
          </div>
        </div>
      </div>
      <infinite-loading @infinite="getOtherPage" ref="infiniteLoading1">
        <span slot="no-more"></span>
        <div slot="no-results">
          <br>
          <empty></empty>
        </div>
        <spinner slot="spinner" type="lines"></spinner>
      </infinite-loading>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showGift" hide-on-blur class="package">
        <div v-if="box" class="box">
          <div v-if="box.monkeyId">
            <h2># {{ box.monkeyId }}的采集</h2>
            <p v-if="box.fightStatus == -1">小猴走失了(ㄒoㄒ)</p>
          </div>
          <div v-else>
            <h2>共打开{{box.packNum}}个包裹</h2>
            <p v-if="box.missMonkeyNum > 0">{{box.missMonkeyNum}}只小猴走失了(ㄒoㄒ)</p>
          </div>
          <p v-if="box.prizePeach">蟠桃*{{ box.prizePeach }}</p>
          <p v-if="box.prizeToken">石头*{{ box.prizeToken }}</p>
          <p v-if="box.feePeach">神仙草*{{ box.feePeach }}</p>
          <div v-if="box.openAll">
            <p v-if="box.rebornBook">复活书*{{box.rebornBook}}</p>
            <p v-if="box.rebornStone">复活石*{{box.rebornStone}}</p>
          </div>
          <div v-else>
            <p v-if="box.prizeSpecial == 1">复活书*1</p>
            <p v-if="box.prizeSpecial == 2">复活石*1</p>
          </div>
          
          <p v-if="!box.feePeach && !box.prizeToken && !box.prizePeach && !box.rebornBook && !box.rebornStone && !box.prizeSpecial && !box.renshen">哦哟，小猴子溜达一圈，啥都没有带回来~</p>
          <div class="hash" v-if="box.hash">
            采集hash：<br>{{ box.hash }}
          </div>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showTime" hide-on-blur class="package">
        <div v-if="endTime" class="box">
          <h2>采集中…</h2>
          <count-down v-if="showTime" :startTime="new Date().getTime()" :endTime="endTime" endText="0 秒"></count-down>后返回
        </div>
      </x-dialog>
    </div>
    <!-- 复杂筛选 -->
    <div v-transfer-dom>
      <popup v-model="showFilter" position="right" width="300px" class="filters">
        <div class="wrap">
          <div class="block">
            <group :title="$t('代数')" class="input-range">
              <x-input v-model="params.startGen" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endGen" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('体重')" class="input-range">
              <x-input v-model="params.startWeight" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endWeight" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('力量值')" class="input-range">
              <x-input v-model="params.startMakeMoney" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endMakeMoney" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
          </div>
        </div>
        <div class="button">
          <x-button type="warn" class="btn" @click.native="resetFilter">{{$t('重置')}}</x-button>
          <x-button type="primary" class="btn" @click.native="enterFilter">{{$t('确定')}}</x-button>
        </div>
      </popup>
    </div>
    <!-- 自动旅行 -->
    <div v-transfer-dom>
      <popup v-model="showAutoFilter" position="right" width="100%" class="filters">
        <div class="wrap">
          <div class="block">
            <h1>设置自动采集</h1>
            <group :title="$t('代数')" class="input-range">
              <x-input v-model="autoParams.startGen" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="autoParams.endGen" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('体重')" class="input-range">
              <x-input v-model="autoParams.startWeight" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="autoParams.endWeight" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('力量值')" class="input-range">
              <x-input v-model="autoParams.startMakeMoney" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="autoParams.endMakeMoney" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('自动采集')" class="input-range">
              <check-icon :value.sync="autoParams.open">勾选此选项后，满足上述条件的小猴将在返回时自动出发采集，请保持猴毛余额充足</check-icon>
            </group>
          </div>
        </div>
        <div class="save">
          <x-button type="primary" class="btn" @click.native="setAutoTraval()">保存</x-button>
          <x-button type="warn" class="btn" @click.native="showAutoFilter = false">关闭</x-button>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import vueSeamless from 'vue-seamless-scroll'
  import {
    Spinner,
    XNumber,
    Group,
    XButton,
    XDialog,
    TransferDom,
    Box,
    Popup,
    XInput,
    CheckIcon
  } from 'vux'
  import empty from './common/empty.vue'
  import CountDown from './common/vue2-countdown.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  import Help from './common/help.vue'
  export default {
    directives: {
      TransferDom
    },
    components: {
      Spinner,
      vueSeamless,
      XNumber,
      Group,
      XButton,
      CountDown,
      XDialog,
      empty,
      InfiniteLoading,
      Box,
      Help,
      Popup,
      XInput,
      CheckIcon
    },
    data() {
      return {
        option: {
          step: 0.5,
          limitMoveNum: 5
        },
        price: 0,
        category: [{
            name: '准备就绪',
            value: ''
          },
          {
            name: '采集中',
            value: 0
          },
          {
            name: '已返回',
            value: 1
          },
          {
            name: '历史',
            value: 2
          }
        ],
        status: '',
        activeReady: null,
        listData: [],
        current: 1,
        current1: 1,
        records: [],
        others: [],
        bol: false,
        showGift: false,
        prize: ['', '筋斗云*1', 'XRP抽奖券*1', '大圣战书*1', '有缘の小猴：'],
        box: null,
        showTime: false,
        endTime: null,
        hairNum: '',
        award: [0, 0, 0],
        showFilter: false,
        showAutoFilter: false,
        autoTraval: false,
        params: {
          current: 1,
          startGen: '',
          endGen: '',
          startMakeMoney: '',
          endMakeMoney: '',
          startWeight: '',
          endWeight: '',
        },
        autoParams: {}
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.initData();
      });
    },
    methods: {
      initData() {
        this.$http
          .get(`/travel/travelNewList`)
          .then(res => {
            if (res.code == 200) {
              this.listData = res.result.list;
              this.hairNum = res.result.dict.value;
              this.award = res.result.award
            } else {}
          })
          .catch(function(error) {});
      },
      getReadyPage($state) {
        this.$http
          .post(`/travel/travelReadyPage`, this.params)
          .then(res => {
            if (res.code == 200) {
              if (res.result.records.length > 0) {
                this.records = this.records.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.params.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      },
      getOtherPage($state) {
        this.$http
          .post(`/travel/travelPage`, {
            current: this.current1,
            status: this.status
          })
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.others = this.others.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.current1 += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      },
      goTrip(id) {
        this.$vux.loading.show({
          text: '请稍后'
        })
        this.$http
          .post(`/travel/travelStart`, {
            readyId: id
          }).then(res => {
            this.$vux.loading.hide()
            if (res.code == 200) {
              this.$vux.toast.text('小猴已出发')
              this.resetReadyPage()
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      openAll() {
        this.$http
          .post(`/travel/oneKeyOpenPackage`)
          .then(res => {
            if (res.code == 200) {
              this.box = {
                packNum: res.result[0],
                prizePeach: res.result[1],
                prizeToken: res.result[2],
                feePeach: res.result[3],
                missMonkeyNum: res.result[4],
                rebornBook: res.result[5],
                rebornStone: res.result[6],
                renshen: res.result[7],
                openAll: true
              }
              console.log(this.box);
              this.showGift = true
              this.resetOthersPage()
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      tripConfirm(readyId, monkeyId) {
        var that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: `确认花费${that.hairNum}猴毛送# ${monkeyId}小猴去采集吗？`,
          confirmText: '出发',
          cancleText: '算了',
          onConfirm() {
            that.goTrip(readyId)
          }
        })
      },
      tripAllConfirm() {
        var that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: `使用此功能需要绑定瑞波钱包地址，每只小猴收取5猴毛服务费！注意半个小时仅能使用一次此功能。`,
          confirmText: '全部出发',
          cancleText: '算了',
          onConfirm() {
            that.tripAll()
          }
        })
      },
      tripAll() {
        this.$vux.loading.show({
          text: '请稍后'
        })
        this.$http
          .post(`/travel/oneKeyTravelStart`, this.params).then(res => {
            this.$vux.loading.hide()
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {} else {}
          })
          .catch(function(error) {});
      },
      clickEvent(status, id, endTime) {
        if (status == 0) {
          this.endTime = endTime;
          this.showTime = true
        }
        if (status == 1) {
          this.openPackage(id)
        }
        if (status == 2) {
          this.checkPackage(id)
        }
      },
      openPackage(id) {
        this.$http
          .post(`/travel/openPackage`, {
            id: id
          })
          .then(res => {
            if (res.code == 200) {
              this.box = res.result
              this.showGift = true
              this.resetOthersPage()
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      checkPackage(id) {
        this.$http
          .get(`/travel/travelEndDetail/${id}`)
          .then(res => {
            if (res.code == 200) {
              this.box = res.result
              this.showGift = true
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      resetFilter() {
        this.params.startGen = '';
        this.params.endGen = '';
        this.params.startMakeMoney = '';
        this.params.endMakeMoney = '';
        this.params.startWeight = '';
        this.params.endWeight = '';
      },
      enterFilter() {
        this.$nextTick(() => {
          this.resetReadyPage()
          this.showFilter = false
        });
      },
      resetReadyPage() {
        this.params.current = 1;
        this.records = []
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
      },
      resetOthersPage() {
        this.current1 = 1;
        this.others = [];
        this.$nextTick(() => {
          this.$refs.infiniteLoading.$emit('$InfiniteLoading1:reset');
        });
      },
      // 筛选目录
      changeCategory(value) {
        this.status = value
        if (value === '') {
          this.resetReadyPage()
        } else {
          this.bol = false
          this.$nextTick(() => {
            this.bol = true
            this.resetOthersPage()
          });
        }
      },
      showAuto() {
        this.$http
          .get(`/travel/getTravelRobot`)
          .then(res => {
            if (res.code == 200) {
              this.autoParams = res.result
              this.showAutoFilter = true
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      setAutoTraval() {
        this.$http
          .post(`/travel/setTravelRobot`, this.autoParams)
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.showAutoFilter = false
            } else {}
          })
          .catch(function(error) {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  a {
    color: $link;
  }
  .seamless-warp {
    height: 160px;
    overflow: hidden;
    .item {
      font-size: 14px;
      line-height: 1.4;
      li {
        background: #fcfcfc;
        margin-bottom: 8px;
        padding: 5px 8px;
        border-radius: 3px;
      }
    }
  }
  .scroll-msg {
    padding: 0 12px 12px;
    .title {
      color: $green;
      line-height: 40px;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .auto {
      padding: 0 5px;
      border: 1px solid $tmdark;
      border-radius: 4px;
    }
  }
  .filter {
    display: flex;
    justify-content: space-between;
    white-space: nowrap; // flex-wrap: wrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin: 0 8px 12px;
    border-radius: 4px;
    box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .status {
      color: $grey;
      li {
        transition: all .3s;
      }
      li:not(:last-child) {
        margin-right: 12px;
      }
      .active {
        color: $green;
        font-size: 14px;
        border-bottom: 2px solid $green;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      .option {
        width: 28px;
        height: 28px;
        margin-left: 5px;
        background: url() no-repeat 50%;
        background-size: 16px 16px;
      }
    }
  }
  .filters {
    overflow: hidden;
    background: #fbf9fe;
    &::-webkit-scrollbar {
      display: none;
    }
    h1 {
      font-size: 22px;
      color: $tmdark;
    }
    .wrap {
      padding-bottom: 60px;
      height: 100%;
      overflow-y: scroll;
      padding: 12px;
    }
    .button {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      .btn {
        width: 50%;
        height: 40px;
        margin: 0;
        border: 0;
        border-radius: 0;
        &:after {
          display: none;
        }
      }
    }
    .save {
      position: absolute;
      padding: 20px 12px;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  }
  .monkey {
    display: flex;
    img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
  }
  .gift-icon {
    span {
      vertical-align: middle;
      margin-right: 5px
    }
    &:after {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      background: url() no-repeat;
      background-size: contain;
    }
  }
  .ready {
    .active {
      .start {
        border-top: 1px solid #dfdfdf;
        margin-top: 12px;
        max-height: 200px;
      }
    }
  }
  .start {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
    p {
      font-size: 12px;
      color: $grey;
    }
  }
  .bar {
    width: 100%;
    margin: 12px auto;
    max-width: 300px;
    height: 38px;
    display: flex;
    button {
      border-radius: 0;
    }
  }
  .box {
    padding: 12px 0;
    .hash {
      text-align: left;
      word-break: break-all;
      font-size: 12px;
      color: $grey;
      padding: 15px 12px 0;
      line-height: 1.2;
    }
  }
</style>

<style lang="scss">
  .bar {
    .input {
      height: 100%;
      width: 60%;
      border: 1px solid #dfdfdf;
      .weui-cells {
        height: 100%;
        &:before {
          display: none;
          border-top: none;
        }
        &:after {
          display: none;
          border-top: none;
        }
        .weui-cell {
          height: 100%;
          padding: 0;
          &:before {
            display: none;
            border-top: none;
          }
        }
      }
      div {
        height: 100%;
      }
      .weui-cell__ft {
        &>div {
          width: 100%;
          display: flex;
        }
        .vux-number-selector {
          height: 100%;
          width: 50px;
          margin-right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 0;
          svg {
            fill: #000;
          }
        }
        .vux-number-input {
          flex: 1;
          height: 100%;
          border: none;
        }
      }
    }
  }
  .package {
    .weui-dialog {
      border-radius: 15px;
    }
  }
  .input-range {
    .weui-cells {
      display: flex;
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
      .weui-cell {
        background: #eeeff1;
        padding: 5px 10px;
        border-radius: 5px;
        &:before {
          display: none;
        }
        input {
          text-align: center;
        }
      }
    }
    .weui-cells__title {
      padding-left: 0;
      color: #666;
      font-weight: 500;
    }
    .dash {
      // width: 80px;
      padding: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fbf9fe;
      &:before {
        content: '';
        width: 20px;
        height: 1px;
        background: #000;
      }
    }
  }
</style>